<script>
// 引入 mapActions 和 mapGetters 帮助方法
import { mapActions, mapGetters } from 'vuex';
export default {
  name: "tableStyle",
  data() {
    return {
      tableShadow: this.$store.getters.theme.tableShadow, //表格阴影
      tableBorder: this.$store.getters.theme.tableBorder, //表格边框
      tableBorderColor: this.$store.getters.theme.tableBorderColor, // 表格边框颜色
      //表头背景颜色
      tableHeaderBgColor: this.$store.getters.theme.tableHeaderBgColor,
      //表格内容背景颜色
      tableThBgColor: this.$store.getters.theme.tableThBgColor,

    }
  },
  computed: {
    // 使用 mapGetters 将 dataModule 模块中的 getData getter 映射为组件的计算属性
    ...mapGetters('themeStyle', ['getThemeStyle'])
  },
  methods: {
    // 使用 mapActions 将 themeStyle 模块中的 saveThemeStyle action 映射为组件的方法
    ...mapActions('themeStyle', ['saveThemeStyle']),
    //   修改样式方法
    //修改表格阴影
    updateTableShadow(val) {
      this.tableShadow = val
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        tableShadow: val
      });
    },
    //修改表格边框
    updateTableBorder(val) {
      this.tableBorder = val
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        tableBorder: val
      })
    },
    //修改表格边框颜色
    updateTableBorderColor(val) {
      this.tableBorderColor = val
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        tableBorderColor: val
      })
    },
    //修改表头背景颜色
    updateTableHeaderBgColor(val) {
      this.tableHeaderBgColor = val
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        tableHeaderBgColor: val
      })
    },
    //修改表格内容背景颜色
    updateTableThBgColor(val) {
      this.tableThBgColor = val
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        tableThBgColor: val
      })
    },
  }
}
</script>

<template>
  <div class="change-card-css">
    <el-row>
      <el-col :span="24" class="style-item">
        <b>表格阴影: </b>
        <el-input-number @change="updateTableShadow" style="width: 40%" v-model="tableShadow" :min="0" :max="30" label="阴影" />
      </el-col>
      <el-col :span="24" class="style-item">
        <b>表格边框: </b>
        <el-input-number @change="updateTableBorder" style="width: 40%" v-model="tableBorder" :min="1" :max="30" label="阴影" />
      </el-col>
      <el-col :span="24" class="style-item">
        <b>表格边框颜色: </b>
        <el-color-picker class="colorPicker" v-model="tableBorderColor" @change="updateTableBorderColor"></el-color-picker>
      </el-col>
      <el-col :span="24" class="style-item">
        <b>表头背景颜色: </b>
        <el-color-picker class="colorPicker" v-model="tableHeaderBgColor" @change="updateTableHeaderBgColor"></el-color-picker>
      </el-col>
      <el-col :span="24" class="style-item">
        <b>内容背景颜色: </b>
        <el-color-picker class="colorPicker" v-model="tableThBgColor" @change="updateTableThBgColor"></el-color-picker>
      </el-col>

    </el-row>
  </div>
</template>

<style scoped lang="scss">
.style-item {
  margin-top:15px;
  display: flex;
  align-items: center;
  b {
    margin-right: 20px;
  }
}
</style>
